<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include::header('进度管理')"/>
    <link rel="stylesheet" th:href="@{/plugins/ganttCustom/ganttCustom.css}">
    <style type="text/css">
        .layui-table-cell {
            font-size: 12px;
        }

        .febs-body-search {
            margin-bottom: 20px;
        }
        .handle_btn_content {
            height: 30px;
            margin-left: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #mainGanttBox {
            height: calc(100% - 150px);
        }

        /* 图例 */
        #symbolPage {
            position: fixed;
            z-index: 100000;
            display: none;
            width: 255px;
            /* border: 1px solid; */
            padding: 20px;
            cursor: move;
            top: 240px;
            right: calc(1% + 50px);
            background: #fff;
            animation: fadenumstyle .5s;
        }
        #symbolPage .color_block {
            width: 50px;
            height: 16px;
            display: inline-block;
        }
        #symbolPage img {
            padding-left: 25px;
        }
    </style>
</head>
<body class="febs-container" id="febs-task">
<div class="febs-body layui-fluid" lay-title="进度管理">
    <div class="febs-body-search">
        <form class="jhg-body layui-form layui-table-form" lay-filter="task-table-form" id="task-table-form">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label layui-form-label-sm">项目经理</label>
                            <div class="layui-input-inline" style="width:140px;">
                                <input type="text" name="managers" autocomplete="off"  style="width: 100%;"
                                       class="layui-input"  >
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label layui-form-label-sm">项目编号</label>
                            <div class="layui-input-inline" style="width:126px;">
                                <input type="text" name="projectCode" th:value="${projectCode}" id="projectCode"
                                       autocomplete="off"   style="width:140px;"      class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label layui-form-label-sm">任务编号</label>
                            <div class="layui-input-inline" style="width:126px;">
                                <input type="text" name="taskCode" id="taskCode" autocomplete="off"
                                       style="width:140px;"      class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label layui-form-label-sm">任务状态</label>
                            <div class="layui-input-block"  >
                                <select name="status" id="status" lay-verify="" lay-filter="status"
                                        lay-search>
                                    <option value="">全部</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline" style="margin-left: 30px;">
                            <div id="query" class="layui-btn layui-btn-sm">
                                <em class="layui-icon">&#xe615</em>
                                查询
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

<!--    <div  style="height: 30px;">-->
<!--        <div class="layui-inline"   style="margin-right:50px;float:right;display: flex;align-items: center;transform:-->
<!--         translateY(-7px)" >-->
<!--            <label class="layui-form-label"  style="width:100px;color:#1e51c7;font-size: 16px;">日期区间: </label>-->
<!--            <div class="layui-inline" id="ID-laydate-range">-->
<!--                <input type="text" id="taskStartDate"-->
<!--                       name="taskStartDate" style="padding-top: 5px;width: 100px; align-items: center;text-align:-->
<!--                       center;">-->
<!--                <div style="width:10px;display:inline-block;border-top: 1px solid black;transform:-->
<!--                            translateY(-6px)"></div>-->
<!--                <input type="text" id="taskEndDate"    style="height: 28px;padding-top: 5px;width: 100px;-->
<!--                align-items: center;text-align: center;"   name="taskEndDate"   >-->
<!--            </div>-->
<!--            </div>-->
<!--        </div>-->


    <div id="mainGanttBox" class="schedule_gantt"   style="border:1px solid #eee;margin:5px auto 0;background: #fff;"></div>

    <div class="layui-form" action="" lay-filter="schedule-dialog-form" id="pqdialog"
         style="position:absolute;display: none;background: aliceblue;">
        <ui>
            <li>
                <a class="layui-btn-sm" lay-filter="pause"     shiro:hasPermission="progress:pause" id="pause"
                   onclick="pauseTask(this)">暂停</a>
            </li>
            <li>
                <a class="layui-btn-sm" lay-filter="complete"  shiro:hasPermission="progress:complete" id="complete"    onclick="completeTask(this)">完成</a>
            </li>
        </ui>
    </div>

    <div id="pauseDialog" style="display: none">
        <form class="layui-form">
            <div class="layui-form-item">
                <input id="pauseTaskCode" name="pauseTaskCode" class="febs-hide">
                <input  id="pausePlanStartDate" name="pausePlanStartDate" class="febs-hide">
                <div class="layui-row"  style="margin-top: 10px;" >
                    <div class="layui-col-md8">
                        <label class="layui-form-label  febs-form-item-require" style="width: 110px;">暂停时间：</label>
                        <div class="layui-input-block" style="margin-left: 130px;">
                            <input type="text" lay-verify="required"   id="pauseDate" name="pauseDate"
                                   class="layui-input"  style="width: 120px;">
                        </div>
                    </div>

                    <div class="layui-col-md4">
                        <div style="display: inline-block;margin-right: 12px;width: 100px;">
                            <select type="text" id="pauseTime" lay-verify="required" name="pauseTime"
                                    style="width:100px;">
                                <option value="">请选择</option>
                                <option value="12:00">12:00</option>
                                <option value="17:00">17:00</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item" style="margin-top: 10px;">
                    <div class="layui-row" >
                        <div class="layui-col-md12">
                            <label class="layui-form-label   febs-form-item-require" style="width: 110px;">暂停原因：</label>
                            <div class="layui-input-block" style="margin-left: 130px;margin-right: 18px;">
                                    <textarea type="text" class="layui-textarea" id="pauseReason"
                                              style="min-height: 50px;"          lay-verify="required"
                                              name="pauseReason"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="layui-btn febs-hide" lay-submit="" lay-filter="pause-submit"
                        id="pauseSubmit">提交
                </button>
            </div>
        </form>
    </div>


    <div id="completeDialog" style="display: none">
        <form class="layui-form">
            <div class="layui-form-item">
                <input id="completeTaskCode" name="completeTaskCode" class="febs-hide">
                <input id="completePlanStartDate" name="completePlanStartDate" class="febs-hide">
                <div class="layui-row"  style="margin-top: 10px;">
                    <div class="layui-col-md8">
                        <label class="layui-form-label  febs-form-item-require" style="width: 110px;">完成时间：</label>
                        <div class="layui-input-block"    style="margin-left: 130px">
                            <input type="text" id="completeDate" name="completeDate"  lay-verify="required"
                                   class="layui-input"  style="width: 100px;" >
                        </div>
                    </div>

                    <div class="layui-col-md4 ">
                        <div  style="display: inline-block;margin-right: 15px;">
                            <select type="text" id="completeTime"  lay-verify="required" name="completeTime">
                                <option value="">请选择</option>
                                <option value="12:00">12:00</option>
                                <option value="17:00">17:00</option>
                            </select>
                        </div>
                    </div>
                </div>
                <button class="layui-btn febs-hide" lay-submit="" lay-filter="complete-submit"
                        id="completeSubmit">完成
                </button>
            </div>
        </form>
    </div>

    <div style="position: fixed;z-index: 99999;right: 1%;bottom: 2%;cursor: pointer;">
        <div style="position: fixed;z-index: 99999;right: calc(1% + 20px);top: 215px;cursor: pointer;">
            <div id="legend"
                 style="width: 35px;height: 35px;background: #5aefef94;border-radius: 35px;line-height: 34px;text-align: center;display: inline-block;color: #787ceb;">
                <span>图例</span>
            </div>
            <div id="symbolPage">
                <div style="margin-top: 10px;">
                    <span class="color_block" style="background: rgba(255, 255, 0, 1);"></span>
                    <span style="margin-left: 10px;">未开始(试验条件不完备)</span>
                </div>
                <div style="margin-top: 10px;">
                    <span class="color_block" style="background: rgba(129, 211, 248, 1);"></span>
                    <span style="margin-left: 10px;">未开始(试验条件完备)</span>
                </div>
                <div style="margin-top: 10px;">
                    <span class="color_block" style="background: rgba(112, 182, 3, 1);"></span>
                    <span style="margin-left: 10px;">试验中</span>
                </div>
                <div style="margin-top: 10px;">
                    <span class="color_block" style="background: rgba(170, 170, 170, 1);"></span>
                    <span style="margin-left: 10px;">已完成</span>
                </div>
                <div style="margin-top: 10px;">
                    <span class="color_block" style="background: rgba(236, 128, 141, 1);"></span>
                    <span style="margin-left: 10px;">已暂停</span>
                </div>
            </div>
        </div>
    </div>

</div>

<th:block th:include="include::foot"/>

<script th:src="@{/febs/js/sypq/progress/progressList.js}"></script>
<script th:src="@{/febs/js/sypq/progress/ganttCustom.js}"></script>

<script data-th-inline="javascript">
    var permissionSet=[[${permissions}]];
    var reasonData=[[${permissions}]];
</script>


</body>

</html>
<style type="text/css">
    #rightTable {
        width: calc(100% - 500px);
    }

    .layui-table-cell {
        font-size: 12px;
    }

    .colCollops {
        left: 498px ;
    }

    .layui-input{
        width: 100px !important;
    }

    #pqdialog {
        z-index: 100;
    }

</style>
